<template>
  <div class="filter">
    <button class="filter-button f1"
            v-for="(button,index) in buttons"
            v-on:click="buttonClick(index)" v-bind:key="index">
      {{ button.title }}
      <el-icon v-if="button.state === 'down'" class="el-icon-sort-down icon active"/>
      <el-icon v-if="button.state === 'up'" class="el-icon-sort-down icon"/>
      <el-icon v-if="button.state === 'up'" class="el-icon-sort-up icon active"/>
      <el-icon v-if="button.state === 'down'" class="el-icon-sort-up icon"/>
    </button>
  </div>
</template>

<script>
export default {
  name: "ListFilter",
  props: {
    state: {
      type: Array,
      default() {
        return ['up', 'up', 'up', 'up', 'up'];
      }
    }
  },
  data() {
    return {
      buttons: [
        {title: '作者编码', state: 'down'},
        {title: '修改时间', state: 'down'},
        {title: '点赞数量', state: 'down'},
        {title: '热度', state: 'down'},
        {title: '文章名', state: 'down'},
      ]
    }
  },
  methods: {
    buttonClick(index) {
      this.buttons[index].state = this.buttons[index].state === 'up' ? 'down' : 'up';
      this.sortedUpdate()
    },
    sortedUpdate() {
      this.$emit('sortedUpdate', this.buttons)
    }
  }
}
</script>

<style scoped lang="scss">
.filter {
  position: relative;
  width: 85%;
  min-width: 200px;
  margin: 0 auto;
  text-align: left;

  &-button {
    color: rgba(4, 19, 23, 0.5);
    padding: 8px 15px;
    border-radius: 5px;
    background: white;
    border: 1px solid #e8e8e8;
    transition: all .3s;
    box-shadow: 1px 1px 5px #c5c5c5,
    -1px -1px 5px #ffffff;
    margin: 5px 5px 0 0;

    &:active {
      color: #666;
      box-shadow: inset 4px 4px 12px #c5c5c5,
      inset -4px -4px 12px #ffffff;
    }
  }
}

.icon {
  font-size: 18px;
  vertical-align: text-top;
  color: rgba(0, 0, 0, 0.2);
  width: 8px;
  font-weight: bolder;
}

.active {
  color: rgba(0, 0, 0, 0.6);
}
</style>